<template>
    <van-grid :border="false">
        <van-grid-item icon="/xiaoxi.png" text="所有评论" to="/user/comment"/>
        <van-grid-item v-if="likeNum===0" icon="/mingyuan.png" text="赞" to="/user/like"/>
        <van-grid-item v-else icon="/mingyuan.png" text="赞" :badge="likeNum" to="/user/like"/>
        <van-grid-item icon="/kefu.png" text="关注" to="/user/follow"/>
        <van-grid-item to="/fans">
            <template #icon>
                <van-icon class-prefix="my-icon" name="/gongren.png" size="28"/>
            </template>
            <template #text>
                <span style="margin-top: 8px;font-size: 14px">粉丝</span>
            </template>
        </van-grid-item>
    </van-grid>
    <van-divider/>

<!--    <van-cell v-if="blogNum===0" to="/user/follow/blog">
        <template #title>
            <span class="cell-span">我的关注</span>
        </template>
        <template #icon>
            <div class="icon_area">
                <van-icon  name="/dianzan.png" size="49"
                          style="margin-left: 1px;margin-top: 1px"/>
            </div>
        </template>
    </van-cell>
    <van-cell v-else to="/user/follow/blog">
        <template #title>
            <span class="cell-span">我的关注</span>
        </template>
        <template #icon>
            <van-badge :content="blogNum">
                <div class="icon_area">

                  <van-icon  name="/dianzan.png" size="49"
                             style="margin-left: 1px;margin-top: 1px"/>
                </div>
            </van-badge>
        </template>
    </van-cell>-->
    <van-cell @click="toHallChat">
        <template #title>
            <span class="cell-span">公共聊天室</span>
        </template>
        <template #label>
            <span class="cell-span"></span>
        </template>
        <template #icon>
            <div class="icon_area">
                <van-image src="/favicon1.png" width="52" height="52" round
                           />
            </div>
        </template>
        <template #value>
            <van-tag color="#ffe1e1" text-color="#ad0000">官方</van-tag>
        </template>
    </van-cell>
  <van-cell-group v-for="user in userList">
    <van-cell @click="toChat(user.userId,user.name)">
      <template #title>
        <span class="cell-span">{{ `${user.name}` }}</span>
      </template>
      <template #icon>
        <van-image :src="user.avatarUrl || defaultImg" round width="50" height="50" style="margin-left: 10px"/>
        <!--                    <van-icon name="volume" color="#2a2e31" class="icon" size="20px"/>-->
      </template>
      <template #right-icon>
        <van-icon name="/xinxi.png" :badge="user.num" style="margin-top: 15px" size="25px"/>
      </template>
    </van-cell>
  </van-cell-group>
  <van-cell-group v-for="team in teamList">
    <van-cell @click="toChatRoom(team.id,team.name)">
      <template #title>
        <span class="cell-span">{{ `${team.name}` }}</span>
      </template>
      <template #label>
        <span class="cell-span">{{ team.description }}</span>
      </template>
      <template #icon>
        <van-image :src="team.coverImage || defaultImg" round width="50" height="50" style="margin-left: 10px"/>
        <!--                    <van-icon name="volume" color="#2a2e31" class="icon" size="20px"/>-->
      </template>
      <template #right-icon>
        <van-icon name="/xinxi.png" :badge="team.num" style="margin-top: 15px" size="25px"/>
      </template>
    </van-cell>
  </van-cell-group>

</template>

<script setup>
import {onMounted, ref} from "vue";
import myAxios from "../plugins/my-axios.js";
import {useRouter} from "vue-router";
import defaultImg from "../../public/defalutTeamImg.jpg";
import {badgeProps} from "vant";

const teamList = ref()
const likeNum = ref(0)
const blogNum = ref(0)
const userList = ref()
onMounted(async () => {
    let res = await myAxios.get("/team/list/my/join/all");
    if (res?.data.code === 0) {
        teamList.value = res.data.data
    }
    let res1 = await myAxios.get("/message/user");
    if (res1.data.code === 0) {
      userList.value = res1.data.data
    }
    let res2 = await myAxios.get("/message/like/num");
    if (res2.data.code === 0) {
        likeNum.value = Number(res2.data.data)
    }
    let res3 = await myAxios.get("/message/blog/num");
    if (res3?.data.code === 0) {
        blogNum.value = Number(res3.data.data)
    }
})
let router = useRouter();
const toChatRoom = (id, name) => {
    router.push({
        path: "/chat",
        query: {
            teamId: id,
            teamName: name,
            teamType: 2
        }
    })
}
const toChat = (id, name) => {
  router.push({
    path: "/chat",
    query: {
      id: id,
      username: name,
      userType: 1
    }
  })
}
const toHallChat = () => {
    router.push("/chat")
}

</script>

<style>
.icon_area {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ededed;
    position: relative;
    margin-left: 10px;
}

.van-cell {
    padding-left: 5px;
}

.icon {
    position: absolute;
    left: 14px;
    top: 14px
}

.van-divider {
    margin: 2px;
}

.cell-span {
    margin-left: 10px;
}

:root:root {
    --van-grid-item-text-font-size: 14px
}
</style>
